<template>
  <div class="card orghistory">
    <ztree :setting="treeSetting.setting" :nodes="treeSetting.treeData" @onClick="onClick"></ztree>
    <div ref="pdfContainer" class="pdf-container"></div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref } from "vue";
import * as pdfjsLib from "pdfjs-dist";
import { transTree } from "@/utils/util";
import { getFondsList } from "../fondsManage/fonds";
import useCurrentInstance from "@/utils/useCurrentInstance";
pdfjsLib.GlobalWorkerOptions.workerSrc = "/pdfjs/build/pdf.worker.min.mjs";

const treeSetting = reactive({
  setting: {
    // ztree配置
    data: {
      simpleData: {
        enable: false,
        idKey: "Fonds_ID",
        pIdKey: "Fonds_Father"
      },
      key: {
        name: "Fonds_Name"
      }
    },
    view: {
      showIcon: true
    }
  },
  treeData: [] as any[],
  treeNode: {} as any
});

const pdfContainer = ref<any>(null);
const { proxy } = useCurrentInstance();
// 树节点点击事件
const onClick = (treeNode: any) => {
  treeSetting.treeNode = treeNode;
  console.log(treeNode);
  if (!treeNode.Fonds_FondsIntro_Url) {
    proxy.$message.warning("请上传pdf文档！");
    return;
  }
  const url = import.meta.env.VITE_STATIC + treeNode.Fonds_FondsIntro_Url;
  renderPDF(url);
};

const renderPDF = async (fileUrl: string, scale = 2) => {
  if (!pdfContainer.value) return;
  pdfContainer.value.innerHTML = ""; // 清空之前的 PDF 渲染内容

  const pdf = await pdfjsLib.getDocument(fileUrl).promise;
  const numPages = pdf.numPages;

  for (let pageNumber = 1; pageNumber <= numPages; pageNumber++) {
    const page = await pdf.getPage(pageNumber);
    const viewport = page.getViewport({ scale });

    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d") as any;
    canvas.width = viewport.width;
    canvas.height = viewport.height;

    await page.render({ canvasContext: context, viewport }).promise;

    pdfContainer.value.appendChild(canvas);
  }
};

// 递归遍历treeSetting.treeData及children 设置iconOpen、iconClose、icon
const setIcon = (data: any) => {
  data.forEach((item: any) => {
    item.iconOpen = new URL("@/assets/imgs/opened_folder.png", import.meta.url).href;
    item.iconClose = new URL("@/assets/imgs/folder.png", import.meta.url).href;
    item.icon = new URL("@/assets/imgs/file.png", import.meta.url).href;
    if (item.children?.length) setIcon(item.children);
  });
};

// 获取全宗数据
const getFondsData = async () => {
  const res = await getFondsList();
  treeSetting.treeData = transTree(res, "Fonds_ID", "Fonds_Father");
  setIcon(treeSetting.treeData);
};
onMounted(() => {
  getFondsData();
});
</script>

<style>
.pdf-container canvas {
  margin-bottom: 16px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgb(0 0 0 / 10%);
}
</style>

<style lang="scss" scoped>
.orghistory {
  display: flex;
  height: 100%;
  .z-tree {
    width: 200px;
  }
}
.pdf-container {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
  text-align: center;
  background-color: #f0f0f0;
  border-radius: 4px;
}
</style>
